<!-- 编辑数据交换站点参数 -->
<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="modalTitle" @ok="onButtonOkClick">
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';

  import { saveParamGroupValues } from '/@/api/platform/paramValue';

  import { useMessage } from '/@/hooks/web/useMessage';
  import { OperationTypeEnum } from '/@/enums/appEnum';

  const { createMessage } = useMessage();

  export default defineComponent({
    name: 'EditExchDataParams',
    components: { BasicModal, BasicForm },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      //弹出窗口界面是新增数据、修改数据；根据传递过来的参数进行判断
      const op = ref(OperationTypeEnum.UN_KNOWN);

      const paramData = ref({});
      const objCode = ref('');
      const objName = ref('');
      const groupCode = ref('');

      //标题--根据传入的站点名称+操作类型组合得到
      const modalTitle = ref('标题');

      // 表单项信息对象
      const vbenEditForm = ref([]);

      const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
        labelWidth: 200,
        schemas: vbenEditForm,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      /**
       * 根据父组件传递过来的参数获取对应的操作，操作不同所对应的界面不同
       */
      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        console.log(data);
        //接收父组件传递的数据
        if (data?.op) {
          //判断是否传入op属性
          op.value = data.op;
        }

        // 分组编码
        if (data?.groupCode) {
          groupCode.value = data.groupCode;
        }

        //参数值信息
        if (data?.paramData) {
          paramData.value = data.paramData;
        }

        //对象编码
        if (data?.objCode) {
          objCode.value = data.objCode;
        }

        // 对象名称
        if (data?.objName) {
          objName.value = data.objName;
        }

        // 弹窗名称处理
        modalTitle.value = objName.value + '参数';
        if (op.value != OperationTypeEnum.UN_KNOWN && op.value != OperationTypeEnum.CUSTOME) {
          modalTitle.value += '--' + op.value;
        }

        resetFields(); //重置表单
        setModalProps({ confirmLoading: false });

        handuleData();
      });

      /**
       * 处理父组件传递过来的数据
       */
      function handuleData() {
        // 处理参数值对象为表单信息并回显数据
        console.log('paramData.value', paramData.value);

        //处理表单显示信息
        let editForm = [];
        paramData.value.items.forEach((item) => {
          // 根据数据类型，加载不同表单项组件
          let component = '';
          // console.log('-=-=-=-=item-=-=-=', item.datatype);
          if (item.datatype == 1) {
            // 日期
            component = 'DatePicker';
          } else if (item.datatype == 2) {
            // 整数
            component = 'InputNumber';
          } else if (item.datatype == 3) {
            // 小数
            component = 'InputNumber';
          } else if (item.datatype == 4) {
            // 布尔
            component = 'Switch';
          } else {
            // 字符串
            component = 'Input';
          }
          let formitem = {
            field: item.itemcode,
            label: item.unit ? item.name + ('(' + item.unit + ')') : item.name,
            component: component,
            colProps: { span: 20 },
          };
          editForm.push(formitem);
          // 如果item有描述信息，对应表单label右侧增加提示
          if (!!item.description) {
            console.log('描述', item.description);
            // console.log('editForm', editForm);
            editForm.forEach((form) => {
              if (item.itemcode == form.field) {
                console.log('form', form);
                form.helpMessage = item.description;
              }
            });
          }
        });
        // console.log('editForm======', editForm);
        vbenEditForm.value = editForm;

        // 处理表单回显数据
        paramData.value.objs.forEach((obj) => {
          if (obj.objcode == objCode.value) {
            console.log('obj.values-------', obj.values);
            setFieldsValue({
              ...obj.values,
            });
          }
        });
      }

      /**
       * 点击确认按钮保存参数信息
       */
      async function onButtonOkClick() {
        const values = await validate();
        // 构建保存接口的参数对象
        let savecondition = {
          groupcode: groupCode.value,
          objs: [{ objcode: objCode.value, objname: objName.value, values: values }],
        };
        console.log('要提交保存的参数', savecondition);
        saveParamGroupValues(savecondition)
          .then((res) => {
            console.log('res', res);
            if (!res || Object.keys(res).length == 0) {
              createMessage.success('保存成功。', 2);
            }
            opSuccess();
          })
          .catch((ex) => {
            console.log('getParamGroupValuesData ex', ex);
          });
      }

      //操作成功后
      function opSuccess() {
        closeModal();
        emit('success');
      }

      return {
        op,
        modalTitle,
        registerModal,
        registerForm,
        onButtonOkClick,
        opSuccess,
      };
    },
  });
</script>
